<template>
  <div class="emergency-info">
    <h2>应急信息公告</h2>
    <el-table 
      :data="paginatedData" 
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="title" label="标题" width="180"/>
      <el-table-column prop="content" label="内容" show-overflow-tooltip/>
      <el-table-column prop="publishDate" label="发布日期" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.publishDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="expiryDate" label="过期日期" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.expiryDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="emergencyList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { formatDate } from '@/utils/date'

export default {
  name: 'EmergencyInfo',
  data() {
    return {
      loading: false,
      emergencyList: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.emergencyList.slice(start, end);
    }
  },
  created() {
    this.fetchEmergencyInfo()
  },
  methods: {
    formatDate,
    async fetchEmergencyInfo() {
      try {
        this.loading = true;
        const response = await request.get('/api/emergency/list');
        // 按创建时间降序排序
        this.emergencyList = response.sort((a, b) => {
          return new Date(b.createdAt) - new Date(a.createdAt);
        });
      } catch (error) {
        console.error('获取应急信息失败:', error);
        this.$message.error('获取应急信息失败');
      } finally {
        this.loading = false;
      }
    },
    // 处理每页显示数量变化
    handleSizeChange(val) {
      this.pageSize = val;
      // 如果当前页超出新的总页数，则重置为第一页
      const maxPage = Math.ceil(this.emergencyList.length / this.pageSize);
      if (this.currentPage > maxPage) {
        this.currentPage = 1;
      }
    },
    // 处理当前页变化
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 获取状态类型
    getStatusType(status) {
      const types = {
        PUBLISHED: 'success',
        DRAFT: 'info',
        EXPIRED: 'danger'
      }
      return types[status] || 'info'
    },
    // 获取状态文本
    getStatusText(status) {
      const texts = {
        PUBLISHED: '已发布',
        DRAFT: '草稿',
        EXPIRED: '已过期'
      }
      return texts[status] || status
    }
  }
}
</script>

<style scoped>
.emergency-info {
  padding: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 表格内容过长时显示省略号 */
:deep(.el-table .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 状态标签样式 */
:deep(.el-tag) {
  min-width: 60px;
  text-align: center;
}
</style> 